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تطویز تطبیقات الهواتف الذكيّة 


PEE رز‎ 


باستخدام تقنیات تطوير تطبیقات الویب ذاتها 


Mobile Applications Development 


Using HTML 5 & CSS 3 & Java Script 


المهندس مختار سيّد صالح 


جميغ الحقوق محفوظة للمؤلّفٍ 


الاهداء 


(sally من تقصيري , آرفع هذا العمل المتواضع إلى‎ pees 
تقبل إخوتي‎ 3 f Lisi 2 الذین قدما عْمْرَيْهمَا کلهما قرباناً على مذبح‎ 
الاصطناعي‎ Sie بدمع‎ Gai بقبوله‎ ¿le أن ینکرما‎ Lal 


بعد أنْ Legión‏ ليالي السّهر الطوال ald‏ شاشة الحاسوب. 


5 تار 


بين يدي الکتاب 


بسم الله الرّحمن الرحیم , و الصّلاة و DU‏ على نبيّنا محمّد و على Jal‏ بيته و آله و صحابه 


آجمعین , و بعد: 


((لم يعد ال Web‏ الیوم مقتصراً بمهامه على نقدیم المعلومة „Zei USS:‏ بسیط , حیث أصبح من 
المهم تقديم المحتوی بشکل و أسلوب آقرب ما یکون إلى الاعلامي, بل Ly‏ هو کذلك فعلاً, فمن 
النادر أن تجد في مواقع ال Web‏ الیوم -و el‏ الجيدة منها- ما لا يقدم المعلومة بشکل مسموع 
و مرئي إضافة إلى الشکل النقليدي المقروء, هذا من ناحية, آما من ناحية الأخرى فقد نطوّر ال 
Web‏ ذاته کفهوم مع بدء phill‏ لما یعرف بال 2.0 Web‏ عام 2006 )1 2.0 Web‏ حوّل 
وظيفة الویب من تلقين المعلومة إلى السماح للمستخدمین بانشائها بشکل نفاعلي) , و مع بدء 
التنظیر لا 3.0 Web‏ هذه الأيام (الویب الدلالی) , و هذا ما GN‏ بالنتيجة إلى ظهور الحاجة 
لتطویر الأدوات و اللغات البرمجية التي كانت بين يدي مطوري و مصممي مواقع ال Web‏ و التي 
آصبحت قاصرةً عن تحقیق متطلبات العملاء الطموحین بامتلاك allge‏ ويب عصرية , و سرعان 
ما ald‏ من بهمه yal‏ التقنية بتطویرها و نقدیم اصدارات جديدة منها أقوى و ¿SÍ‏ تأقلماً مع Web‏ 
الیوم, ذلك GY‏ "لتأقلم یعتبر أساس النجاح في alle‏ ال ۷۷۵0)),! 


هذا على مستوی المفاهیم Lal,‏ على مستوى العتاد و التجهیزات فقد تزامنت هذه القفزات الكبيرة في 
مفاهیم الویب مع قفزات كبيرة أيضاً في تقنيّات تصنيع الهواتف ASM)‏ فاشتعل التنافس بين 
الشرکات المصتعة لها لاحتلال أكبر الحصص السوقيّة الممكنة , لدرجة a‏ لا آبالغ حين أقول أنّْ 
الأسابيع في السنوات الأخيرة -و ربّما الأيّام- أصبحت تعرف لا بتواریخها بل بأسماء و مودیلات" 
الهواتف الذكيّة الجديدة التي أَطْلِقَتْ خلانها ! , و at SEF‏ لا أبالغ أيضاً إن قلت أنّ الهواتف 


آمن مقتمة „us‏ (تعلم 5 CSS 3 „HTML‏ الخطوة GANT‏ نحو البرمجة للویب). 


الذكيّة في alle‏ الیوم دخلت كل بيت من بيوتنا فامتلکت بذلك الحصّة الاعظم على الاطلاق في 


تاريخ سوق الحواسیب من حيث عدد المستخدمین. 


U‏ على مستوی برمجیّات الهواتف الذكيّة و هو المستوی الأهم بالنسبة لنا (كمختصّين أوكمطوّرين 
هواة على ds‏ سواء) فقد ازدهر سوق تطوير برمجیّات الهواتف الذكيّة بشکل مذهل و ازداد الطلب 
ule‏ و بالتالي على المطورین/المبرمجین سريعي التأقلم , و لا أقول سريعي التأقلم هنا من باب 
المجاز أو المبالغة في التخييل الأدبي , بل آقولها بالمعنی الحرفي الدقیق و ذلك GY‏ ظهور أي 
هاتف ذكي ana‏ ببساطة شديدة كان في الغالب يعني أنّ على المطوّر/المبرمج أن يتعلّم و یتعامل 
مع بيئات تطوير/لغات برمجة جديدة و أنظمة تشغيل جديدة Laj‏ قبل أن Se‏ في التطوير للهاتف 
¿SN‏ الجديد و ذلك بسبب اختلاف العلامات التجارية لمصتعي الهواتف الذكيّة و ما يتبع ذلك من 


حاجة لمراعاة قضايا حقوق الملكيّة الفكريّة و غير ذلك Use‏ هو معلوم للجميع. 


على Uh‏ حال, و نتيجة لما سبق ذكره فقد أصبح على من يريد أن يطوّر تطبيقاً لأجهزة شركة معيّنة 
أن يتعامل مع بيئة التطوير التي تعتمدها تلك الشركة بالذات, و مع نظام التشغيل الذي تعتمده 
لأجهزتها هي بالذات, فالمطوّر الذي يريد أن يطوّر تطبيقاً لأجهزة شركة Apple‏ الذكيّة iPhone)‏ 
أو (tis iPad‏ يجب عليه أن يتعامل مع iiy‏ تطوير Xcode‏ الخاصة بالتطوير لنظام تشغيل 
IOS‏ و المطوّر الذي يريد أن يطوّر تطبيقاً لأجهزة شركة Samsung‏ الذكيّة (هواتف Galaxy‏ 
أو أجهزة (ie Aa Galaxy‏ يجب أن يتعامل مع Android SDK‏ و بيئة Eclipse‏ (أو 
غيرها) و نظام تشغيل Android‏ , و المطوّر الذي يريد أن يطوّر لأجهزة شركة BlackBerry‏ 


SN‏ يجب عليه أن يتعامل مع iiy‏ تطوير مختلفة و نظام تشغيل مختلف ... و هكذا. 


على المستوى الشخصي, و کمطور قادم من خلفيّة اختصاصيّة في التطوير للويب فقد كان دخولي 
إلى alle‏ التطوير للأجهزة الذكيّة يعني حاجتي لتعلّم عدّة لغات برمجيّة و die‏ تقنيّات جديدة و هو 


أمر -على اعتيادي عليه- لم تتحه لي مواردي الزمنيّة و لا الماديّة في وقتها ما دفع بي أن أكتفي 


بتعلم البرمجة لنظام Y Android‏ النظام الاکثر شعبيّة في بلدي و أتوقف عند هذا الحد , مع 
عقد العزم على تعلّم المزيد في أقرب الفرص. 


بعدها بفترة قصيرة وجدث ضالّتي عندما وقعث مصادفة -و لحسن حظي- على تقنيّة جديدة قدّمتها 
شركة Adobe‏ تسمح بتطوير تطبيقات لكافة الهواتف الذكيّة المصتعة من كافة الشركات تقريباً 
باستخدام تقنيّات تطوير الويب الكلاسيكيّة ذاتها , نعم ذاتها , بمعنى A‏ أستطيع أن أطور تطبيقاً 
واحداً و LÍ‏ مطمئنٌ ail‏ سيعمل على كافة منصات الهواتف الذكيّة باستخدام CSS ¿HTML‏ و 


Java script‏ فقط , بعد توسعة الأخيرة بالتقنيّة الجديدة طبعاً. 


هذه التقنيّة الجديدة اسمها PhoneGap‏ و هي الموضوع الأساسي الذي سيحاول هذا الكتاب 
تغطيته بعد أن يمر في صفحاته الأولى بإيجاز على بعض التقنيّات الثانويّة المساعدة في إنجاز 


تطبيق عصريّ باستخدام .phoneGap‏ 


و قد رأيت بعد تأمّل و دراسة مطولين أنّ التوزيع الأنسب لمحتوى هذا الكتاب على فصوله هو ما 
يلي: 


1 - الفصل IN‏ - تطوير واجهات الاستخدام: 

يناقش هذا الفصل ما يجب على مطوّر الويب العاديّ تعلمه قبل البدء باستخدام تقنيّة 
0 فیعرض بشكل موجز بعض الأفكار الأساسيّة المتعلقة بواجهات الاستخدام 
الخاصة بتطبيقات الويب الموجّهة للأجهزة الذكيّة و الفرق بينها و بين واجهات الاستخدام 
في تطبيقات الويب الموجّهة للحواسيب النقليدية , ثمّ يعرض كيفيّة بناء واجهات تطبيقات 
ويب ملائمة للأجهزة الذكيّة و للحواسيب التقليديّة معاً باستخدام تقنيّتين عصريّتين 
خصصت مبحثاً USI‏ منهما في هذا الفصل كمايلي: 

jQuery Mobile تقنيّة‎ : JÄI أ- المبحث‎ 


.Bootstrap ss : ب-المبحث الثاني‎ 


k 


نم أضفت tan‏ ثالثاً لمبدأ ia ¿la‏ في تطوير تطبیقات الهواتف المحمولة باستخدام 
Yi phoneGap‏ و هو jas‏ ال CORS‏ في طلبات ال AJAX‏ 

2- الفصل الثاني - آساسیات :phoneGap‏ 
U‏ في الفصل الثاني فقد ناقشت أساسيّات Cus 00006020 ini‏ بدأت بالتعریف بها ثمّ 
عرضت كيفيّة تثبيتها و البدء باستخدامها مع الأمثلة الأولى البسيطة لاعطاء تصور أفضل 
عن ماهيّتها و All‏ عملها , ثمّ عرضت طريقة تحزیم التطبیقات المكتوبة باستخدام تقنيّة 
۳ و تحویلها إلى تطبیقات AL‏ للتثبیت على أيّ منصّة هاتف محمول. 

3- الفصل التالث- phoneGap‏ في العمق: 
U‏ في الفصل الثالث فقد عرضت بأمثلة سريعة و بسيطة الهدف الأساسي من تقنيّة 
0 و هو as‏ توظیفها لتعطي صفحات الويب العاديّة القدرة على التعامل مع 
کامل منصّة العمل Platform‏ للجهاز الذکی" کالکامیرا و وسائط التخزین و تجهیزات ال 


Bluetooth‏ و ال WiFi‏ و سجل الاسماء و ال Microphone‏ و السمّاعة .. إلخ. 


و قد افترضت آثناء كتابتي لمحتوی هذا الکتاب أنّ القارئ الكريم على معرفة و تجربة کافیتین 
بتقنيّات تطوير الویب الأساسيّة و هي 5 Java Script „CSS 3 ¿HTML‏ (أو (¡Query‏ 


Lil‏ عن طريقة عرضي للافکار في هذا الکتاب فقد حاولت و اجتهدت ما استطعت كي آجعلها غير 
مملّة و غير معقّدة و غير شبيهة بالمحتوی المتعب الذي كثيراً ما عانیت منه شخصيّاً في الكتب 


التي تناقش لغات البرمجة و أخص المكتوبة باللغة العربية منها , مع الأسف. 


* المقصود بمنصّة العمل jka gY Platform‏ حاسوبي هو نظام تشغيله + عتاده المادي. 


7 يمكن لمن يرغب بالاستزادة تحميل نسخ إلكترونيّة من us‏ (تعلّم 5 „(CSS 3 , HTML‏ (تعلّم ¡Query‏ في 
120 دقيقة) بشكل مجّاني من الانترنت و قراءتهما قبل قراءة هذا الكتاب. 


و مع أنه لا يجوز للانسان أن يقيّم عمله إلا أتني سأضع يدي على قلبي متجزناً و آقول أنّ هذا 
الكتاب لا يرشق قارءه بعشرات الأسطر البرمجيّة غير المفهومة دفعة واحدةً دون توضيح لها, كما 
أنه لا يطيل أكثر من المطلوب في عرض الفكرة, لكنه باختصار يقول ما يجب قوله فقط دون أن 


یغفل أي جانب من الجوانب التي تتوجب معرفتها. 


ختاماً أسأل الله أن يتقبّل هذا العمل و أن يبارك فيه و يكتبه من العلم الذي ينتفع به و أن يلهم 
قارئه سرعة اكتساب المعلومة و الصبر على تعلّمها. 


دمشق - الحادي عشر من تشرين الثاني عام 2014 


الفصل ر 


تطویز واجهات الاستخدام الرسومية 


Chapter. 1 


Mobile-First GUI 


4 


مقدمة 


يناقش هذا الفصل تطوير واجهات الاستخدام GUI‏ للتطبيقات Applications‏ تستهدف 
الهواتف 43830 Smart phones‏ و يعرض aa)‏ الفروقات بينها و بين واجهات الاستخدام في 
التطبيقات التقليديّة , بعد ذلك يعرض al‏ نقنیتین مستخدمتين بين المطوّرین Developers‏ على 


مستوى العالم اليوم لتحقيق هذا الغرض و هما jQuery Mobile‏ و -Bootstrap‏ 
واجهات الاستخدام الرسوميّة Graphical User Interfaces‏ 


في التعریف فان واجهة الاستخدام الرسوميّة Graphical User Interface‏ أو GUI‏ اختصاراً 
هي : مجموعة الأیقونات و الرسومات و وسائل التعبیر الصوريّة التي يقدّمها مصنعو الأجهزة 
الإلكترونيّة لاعطاء المستخدمین إمكانيّة التفاعل مع أجهزتهم بشكلٍ ما" * , و في مجال برمجيّات 
الحاسب Sa ¿Y‏ الأمثلة على مکوّنات واجهات الاستخدام الرسوميّة عديدة نذکر منها على سبیل 
المثال لا الحصر الأزرار Buttons‏ , و القوائم المنسدلة Drop Down Lists‏ , و المزالیج 
g, Sliders‏ مربعات ادخال النصوص Text Boxes‏ , و صناديق الاختيار Check idi‏ 


boxes‏ و صناديق الاختبار ...Radio Boxes‏ إلخ. 


و قد جرت العادة منذ ظهور واجهات الاستخدام الرسوميّة في برمجیّات الحاسب Software ¿AY‏ 
dsl‏ مرّة عام 1981 7 على أن تكون واجهة الاستخدام الرسوميّة بسيطة قدر الامکان و مصممة 
لتعمل بشکل Du‏ لشاشة عرض Screen‏ معروفة الأبعاد lil. Resolution‏ , أو لعدّة شاشات 
عرض معروفة الأبعاد سلفاً في أحسن حال , مع العلم المسبق بنوع الجهاز الذي ستعمل عليه 
Al‏ 


.http://en.wikipedia.org/wiki/Graphical_user_interface انظر‎ 4 


«http://www. catb.org/-esr/writings/taouu /html/ch02s05.html انظر‎ 5 


ما في مجال برمجیّات الویب Web Applications‏ و GY‏ نوع الالة التي ستستخدم لمشاهدة 
الموقع Website‏ و نظام تشغیلها O.S.‏ و نوع مستعرض الویب Web Browser‏ الخاص بها 
{els‏ من الأشياء المجهولة بالنسبة للمطوّر فقد جرت العادة حتّى فترة قصيرة على تصمیم نسخة 
واحدة تحوي مناطق ing‏ فارغة و قابلة Flexible Areas ill‏ بحيث يبدو التصمیم بشکل 
مقبول Urs‏ یا تكن دقة عرض ASL‏ التي تستعرضه , و قد اعتبر هذا Jal‏ على عیوبه , حلاً 
كافياً إلى أن ظهرت الهواتف و الأجهزة الذكيّة الجديدة و أحدثت معها ثورة حقيقة في مفاهیم 
تصمیم واجهات الاستخدام كان آبرزها مفهوم تصامیم الویب المتأقلمة Responsive Web‏ 


Desings‏ الذي سنناقشه les‏ في الفقرة التالية. 
تصامیم الويب المتأقلمة Responsive Web Designs‏ 


في التعریف GE‏ تصامیم الویب المتأقلمة هي التصامیم التي يتبع مصمّموها منهجيّة تصمیم 
خاصة تمنح هذه التصامیم قدرة التأقلم (قدرة التغيّر التلقائی في الشکل و الحجم) مباشرةً مع (sh‏ 
تغيّر قد بحدث في دقة الشاشة Resolution‏ أو 435 الشاشة al) Orientation‏ أو آفقي) أو 
طبيعة منصّة العمل Platform‏ في الأجهزة التي تستعرض هذه التصامیم ابتداءً من الأجهزة ذات 
الشاشات الصغيرة کالهواتف الذكية و انتهاء بالحواسیب العادیه ذات الشاشات الکبيرة Laja‏ 


بالأجهزة الكفيّة و اللوحيّة .. إلخ” , الشکل التالي یوضح الفکرة: 


f‏ ترجمة مصطلح Resopnsive Web Design‏ إلى "تصامیم الویب المتأقلمة" اجتراح اجترحته LÍ‏ بعد أن بحثت 
و لم أجد أحداً قبلي قد سبقني إلى ترجمة هذا المصطلح الجدید و لم أعمد إلى ترجمة الصطلح anne‏ بل حاولت أن نکون 
ترجمتي متعلّقة بشکل مباشر بالطبيعة الوظيفيّة لهذا المفهوم , و الله أعلم. 


‚http: //en.wikipedia.org/wiki/Responsive_web_design انظر‎ 7 


1 app 


C3 
a 


3 3 


jas نما‎ 


الصورة 1 : توضیح فكرة تصمیم صفحة الویب المتأقلمة 


mike CI ... 


لانشاء تصمیم ويب منأقلم ay‏ الاستفادة Gi‏ من الوسیط media‏ في CSS‏ لتطبیق ورقة نمط 
Style Sheet‏ مناسبة لكل دقة شاشة بحیث نتولی الورقة dale!‏ توزيع و تحجیم العناصر الخاصة 
بالصفحة بما یناسب الشاشات التي نتراوح أحجامها بين حد آدنی و حد أعلى معرّفين مسبقاً , و 
بهذا فإنَ ما يحدث فعليّاً هو تصمیم HTML iaia‏ واحدة فقط مرتبطة مع عدّة أوراق آنماط Bic)‏ 
ملفات (CSS‏ بحیث يتم تطبیق ورقة آنماط واحدة منها في US‏ مرة بناء على دقة الشاشة التي يجري 


استعراض الصفحة عبرها ‚Ulla‏ 


انظر لشيفرة الصفحة التالية المصمّمة بتقنيّة التصميم المتأقلم على سبیل المثال: 


<html> 
<head> 
<title>My Responsive Page !</title> 
<link media="screen and (min-width: lpx) and (max-width: 300px)" 
href="small.css" rel="stylesheet" type="text/css" /> 


<link media="screen and (min-width: 301px) and (max-width: 600px)" 
href="medium.css" rel="stylesheet" type="text/css" /> 


<link media="screen and (min-width: 601px) and (max-width: 900px)" 
href="large.css" rel="stylesheet" type="text/css" /> 


= 


</head> 
<body> 
<p>content will be here</p> 
</body> 
</html> 


الشيفرة 1 : صفحة ويب متأقلمة بسيطة 
الجزء المهم من الشيفرة أعلاه هو الجزء الخاص بالواصفة media‏ في وسم link‏ حيث xi‏ تحدید 
ورقة الأنماط small.css‏ في حال کون عرض الشاشة بين 1 بیکسل و 300 بیکسل و ذلك من 
خلال إسناد التعبیر (min-width: 100px) and (max-width: 300px)‏ إلى الواصفة 
media‏ و بالمثل تم تحديد ورقتي الأنماط 5 و large.css‏ في dia‏ الاحجام 
الأكبر للشاشة. 


و بالتالي la‏ كتابة مناسبة لملقات medium.css y small.css‏ و large.css‏ ستنتج صفحة 
ويب متأقلمة و مناسبة للعرض على جميع شاشات العرض GH‏ تكن أحجامها , هذه هي الفكرة 
ببساطة و اختصار , و أنصح من أراد الاستزادة و الاستلهام فيما ey‏ بتصاميم الويب المتأقلمة 
بقراءة الموضوع الرائع التالي: 


http: /Jalistapart.com/article/responsive-web-design 


المبحث الأوّل - تقنية ¡Query Mobile‏ $ 


olei‏ فریق تطویر مشروع jQuery‏ في الثالث عشر من آب عام 2010 عن اطلاق النسخة 
الأولى من نقنيّة jQuery Mobile‏ ” و هي تقنيّة جديدة مبنيّة باستخدام التقنيّة الأمّ (تقنيّة 


(jQuery‏ تهدف لتوفير إطار عمل متكامل و سهل الاستخدام يتيح لمطوّري تطبيقات الويب إنشاء 


dad يعرض‎ Ld) فهي بحاجة إلى کتاب مستقل و‎ JQuery Mobile لا يغطي هذا المبحث كامل ميّزات‎ ua? 
موجزة عنها فیما بتطلبه سياق هذا الکتاب و من آراد أن یستفیض في الموضوع فعلیه بزيارة موقع المكتبة و التجوال قليلاً في‎ 
صفحة الأمثلة فهي كفيلة بتعلیمه کامل المیزات خلال أقل من ساعة واحدة بعد قراعته لهذا المبحث باذن الله.‎ 


‚http: //www.jquery.org/history انظر‎ ? 
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واجهات استخدام متأقلمة و مناسبة للأجهزة المزودة بشاشات لمس Touch Screens‏ و ذلك عبر 
توفیر me‏ من الأدوات القابلة للاستخدام مراراً و تكراراً Reusable items‏ في أي صفحة ویب 
تبنی لنکون بمثابة واجهة استخدام رسوميّة لتطبیق يستهدف هاتفاً ZEN gan GS‏ عن نظام 


jQuery Mobile كيفيّة استخدام‎ 


لاستخدام تقنيّة jQuery Mobile‏ يجب أن نقوم Y‏ بتحميل آحدث إصدار منها من خلال موقعها 
الرسمي www.jquerymobile.com‏ 4 الضغط على زر Latest Stable‏ في منطقة 


Download‏ كما توضح الصورة التالية. 


m Yuu dabie hop irad Its von 
1 J uel © davelopment arvi growin ot ¡Query 


mobile 


Demos Download API Oocumentrhon Themes Resources Blog About 


A Touch-Optimized Web Framework 


Cu Malik له‎ uscar inler ucu system | Eater 


Latest Slab 


Sarlously cross-platform with HTML5 ی ی ی‎ SES k 


du, MOV BS har cath ae Jia w los زا‎ muy raa | 
Vo amel bene Iron mund sa” anil ee ot we lı ıı ie 


dsc of LE, te الا‎ ONC SIND slows vo. fo GSN 2 AN 
ال‎ A ل‎ gr ac Mie o ris 


aod: n al pag ar ananahens meist cad dassin geara 
HORÎ un نایم‎ 
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الصورة 2 : تحميل jQuery Mobile‏ موقعها الرسمي 


بعد انتهاء التحميل بشكل صحيح يفترض أن يصبح بحوزتك آخر نسخة من jQuery Mobile‏ 
على شكل ملف مضغوط بصيغة Zip‏ يعرض المخطط التالي أهمّ محتوياته بعد فك ضغطه: 


مجلّد ¡Query Mobile‏ الرئیسی 


(is) Images 
(xi) Demos 


¡Query.mobile.X.X.X.js‏ (ملف و 26۰2۰26 هي رقم الاصدار , الاصدار 1.4.2 هو 
الأحدث حتى تاريخ كتابة هذه الصفحة) 


1.4.2 هي رقم الإصدار , الإصدار‎ X.X.X (ملف و‎ ¡Query.mobile.X.X.X.css 


هو الأحدث حتی تاريخ كتابة هذه الصفحة) 


ملفات أخرى 


الشكل التوضيحي 1 : بنية ملفات jQuery Mobile‏ الأساسيّة 


بعد فك ضغط الملف y‏ البدء باستخدام jQuery Mobile‏ من خلال إنشاء HTML 5 iaia‏ 
dale‏ و تضمين ملفي ¡Query.Mobile.X.X.X.js‏ و ¡Query.Mobile.X.X.X.css‏ في 
منطقة ال Head‏ بعد تضمين مكتبة ¡Query‏ التقليدية ((Query.js)‏ , انظر الشيفرة التالية: 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile dx w</title> 


gles re St gS LS ua ==> 
<script src="jquery.min.js"></script> 


<= lg خی كوفوف‎ Ss Gea! ==> 
<link rel="stylesheet" href="jquery.mobile.1.4.2.min.css" /> 
<script src="jquery.mobile.1.4.2.min.js"></script> 

</head> 


<body> 

‚Ua محتوی صفحتك‎ ۰. 
</body> 
</html> 


الشیفرة 2 : شکل jQuery Mobile iaia‏ الأساسيّة 


Č)‏ اضافة الأسطر المذکورة أعلاه إلى منطقة ال Head‏ في الصفحة سنقوم بشکل تلقائي بتحسین 
مظهر معظم العناصر الموجودة في iaia‏ ال HTML‏ بحیث تجعلها ملائمة لأجهزة الهانف 
المحمول و للأجهزة ذات شاشات Lal, gal‏ بقيّة العناصر التي لا يتم تحسینها بشکل تلقائي 
Gad‏ أن يضاف إلى وسومها واصفة خاصة اسمها 0212-۲06 تسند الیها إحدى القیم المعرّفة 
مسبقاً من قبل فریق تطویر jQuery Mobile‏ و التي تعطي لكل وسم دوره (وظیفته) في التطبیق. 


الأدوار الوظيفية المعرفة مسبقاً في jQuery Mobile‏ 


الجدول التالي يعرض آشهر القیم التي يمكن أن تسند إلى الواصفة 0212-۳016 مع شرح بسيط 
للوظيفة التي يمثلها العنصر الذي تسند إلى واصفته: 


الدور الوظيفي مثال على شيفرة الاستخدام ضمن الصفحة 
<div data-role="collapsible"> ¿Lu Ê AA collapsible‏ 


<h4>Click me to collapse</h4> 


<a data-role="button">My Button</a> 


<p>Collapsed content ....</p> 


</div> 
<div data-role="collapsibleset"> EM RS collapsibleset 
<div data-role="collapsible"> U abe 
<h3>Section A</h3> 


<p>Content of section A.</p> 


</div> 


<div data-role="collapsible"> 
<h3>Section B</h3> 
<p>Content of section B.</p> 
</div> 
</div> 
<div data-role="controlgroup"> حاوية لمجموعة‎ controlgroup 
.. another controls .. A le 
</div> ns is, 
نموذج واحد مثلاً)‎ 
<div data-role="page" id="page1"> علی‎ RES تفتح‎ dialog 
<a href="#dialogPage">Open dialog</a> Gees شکل‎ 
</div> 
حوار منبثق.‎ 
<div data-role="dialog" id="dialogPage"> 
<p>I am a dialog</p> 
</div> 
<input type="checkbox" data-role="flipswitch"> ON / OFF زر‎ 
<ul data-role="listview"> قائمة اخنیارات‎ listview 
<li><a href="index.html">ASP.NET</a></li> 
<li><a href="index.html">PHP</a></li> 
<li><a href="index.html">JAVA</a></li> 
</ul> 
<div data-role="navbar"> Cine 


<ul> 
<li><a class="ui-btn-active">One</a></li> 
<li><a href="#">Two</a></li> 
</ul> 
</div> 
<div data-role="page" id="page1"> 
<div data-role="header"> 


<h1>Page header (optional): Example 
page</h1> 


</div> 
<div role="main" class="ui-content"> 
<h2>Page content</h2> 
<p>Page content goes here.</p> 
</div> 
<div data-role="footer"> 
<h1>Page footer (optional)</h1> 
</div> 
</div> 
<div data-role="page" id="page1"> 
<div data-role="header"> 
<h1>jQuery Mobile Example</h1> 
</div> 
<div role="main" class="ui-content"> 


<a href="#popupBasic" data-rel="popup">Open 


Popup</a> 
<div data-role="popup" id="popupBasic"> 


<p>This is a completely basic popup.</p> 


</div> 
</div> 
</div> 
<div data-role="page" id="page 1"> شریط آدوات أعلى‎ 
<div data-role="header"> Bye أو‎ il! 
<h1>jQuery Mobile Header</h1> أدوات اسل‎ 
</div> N 


<div role="main" class="ui-content"> 
<p>content.</p> 
</div> 
<div data-role="footer"> 
<h1>jQuery Mobile Footer</h1> 
</div> 


</div> 


الجدول 1 : القیم الممکن (سنادها للواصفة data-role‏ في jQuery Mobile‏ 


jQuery Mobile‏ الملائمة للغة العربيّة 


آخر ما يجب أن نذكره عن ¡Query Mobile‏ هنا هو توفر نسخة خاصة باللغات ذات اتجاه 
الكتابة من اليمين إلى اليسار , كاللغة العربية , و هي ممائلة تماماً من حيث الاستخدام لما Es‏ 
شرحه سابقاً الا آتها معدّلة بحيث تعرض اللغة العربية بسلاسة , تتوفر هذه النسخة على الرابط: 


http://www .intlaga.com/jquery-mobile-rtl 
10 Bootstrap المبحث الثاني - تقنيّة‎ 


0 من Gus‏ الفکرة تهدف لتقديم (طار عمل مشابه في هدفه لما نقدمه jQuery Mobile‏ 
تماماً عدا Bootstrap éj‏ تستخدم أسلوباً مختلفاً في الوصول إلى ذلك من خلال توظیفها لنقنيتي 
LESS‏ و SASS‏ في عملها الداخلی بالإضافة لتقنيّة jQuery‏ , في jQuery Mobile ¿Í cus‏ 
توظّف تقنيّة jQuery‏ فقط لتحقيق هذا الهدف IT‏ 


Bootstrap oh‏ من قبل فريق تطوير شبكة Twitter‏ (مارك sigh‏ و يعقوب تورنتون) لتوفير 
تصميم مناسب لمختلف مقاسات شاشات العرض التي يلج مستخدمو Twitter‏ من خلالها إلى 


حساباتهم على شبكة Twitter‏ . 


ثم طْرِحّت للعلن في شهر آب عام 2011 ?' ¡Query Mobile x)‏ بعام (Lä aal;‏ , و قد تم 
اختيارها كأكثر البرمجيّات مفتوحة المصدر شعبيّة على شبكة GitHub‏ الشهيرة لشهر شباط ale‏ 
2012. 


چ بن هه 


کیفیه استخدام Bootstrap‏ 


۳ ملحوظة: لا يغطّي هذا المبحث کامل ميّزات Bootstrap‏ فهي بحاجة إلى GUS‏ مستقلٌ و اّما يعرض لمحة موجزة عنها 
فیما يتطلبه سياق هذا الکتاب و من آراد أن يستفيض في الموضوع فعلیه بزيارة موقعها و التجوال قليلاً في صفحات الأمثلة و 
الدروس فهي ALES‏ بتعلیمه کامل المیزات خلال أقل من ساعة واحدة بعد قراعته لهذا المبحث بإذن الله. 


LESS |‏ و SASS‏ نقنیتان جدیدتان تسمحان للمصممین بكتابة آوراق الأنماط الخاصة بهم مستفیدین من میزات البرمجة 
غرضية التوجه كالوراثة و تعددية الأشکال و غير ذلك. 
12 انظر ‚http: //en.wikipedia.org/wiki/Bootstrap‏ 


لاستخدام تقنيّة Bootstrap‏ يجب أن نقوم Y‏ بتحمیل أحدث إصدار منها من خلال موقعها 
الرسمي www.getbootstrap.com‏ 4 الضغط علی زر LS Download Bootstrap‏ توضح 
الصورة التالية. 


The most popular front-end framework ۵ developing responsive, 
mobile first projects or .ne web. 


الصورة 3 : تحمیل Bootstrap‏ من موقعها الرسمي 


بعد انتهاء التحمیل بشکل صحیح یفترض أن یصبح بحوزنك آخر نسخة من Bootstrap‏ على 


bootstrap 

|= ess/ 

| |] bootstrap.css 

bootstrap.min.css‏ سب 

— bootstrap-theme.css 

— kontstrap-theme.min.ess 


bootstrap.js‏ سب 

— bovlslrep.min. js 

fonts / 

glyphicons-halflings-regular.eot‏ م 

| elyphicons-halflings-regular.sve 
سب‎ gelyphicons-halflings-regular.ttl 
— glyphicons-halflings - ۳2۵ 13۳ ۵+ 


الشکل التوضيحي 2 : محتویات ملف Bootstrap.zip‏ بعد فك ضفظه 


بعد فك ضغط الملف iy‏ البدء باستخدام Bootstrap‏ من خلال انشاء äle HTML 5 iaia‏ و 
تضمین ملفي js/bootstrap.min.js‏ و css/bootstrap.min.css‏ في منطقة ال Head‏ بعد 


تضمین مكتبة ¡Query‏ التقليديّة أيضاً. 


الشيفرة التالية توضّح الشكل الأساسي HTML 5 iaia ¿Y‏ تستخدم :Bootstrap‏ 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap ia w</title> 


<!-- Bootstrap <--تضهین ستایل ال‎ 
<link href="css/bootstrap.min.css" rel="stylesheet"> 


¿les JQuery gauss ==> 
<script src="js/jquery.min.js"></script> 


<[== Bootstrap شکزیت.‎ (seat ==> 
<script src="js/bootstrap.min.js"></script> 


</head> 
<body> 

<hi>Hello, world!</h1> 
</body> 


</html> 


الشيفرة 3 : شکل صفحة Bootstrap‏ الأساسيّة 
بشکل مشابه لكيفية عمل Gls ¡Query Mobile‏ (ضافة الأسطر المذکورة أعلاه إلى منطقة ال 
Head‏ في الصفحة ستقوم بشکل تلقائی بتحسین مظهر معظم العناصر الموجودة في صفحة ال 
HTML‏ بحيث نجعلها ملائمة لأجهزة الهاتف المحمول و للأجهزة دات شاشات اللْمس , أمّا بقية 
العناصر فیمکن أن يتم تحسین مظهرها Laj‏ من خلال إضافة قيمة مناسبة و معرّفة مسبقاً من 
قبل فریق تطویر Bootstrap‏ للواصفة class‏ الخاصة بالوسم الذي يمتلها في الصفحد. 


نظام العرض الشبكي في Bootstrap‏ 


Bootstrap ¿DU‏ محتوى الصفحة مع تغيير أبعاد الشاشة باستخدام تقنيّة الشبكة Grid‏ و ذلك 
عبر تقسيم عرض الصفحة الكلّي منطقَيًاً (بشكل متخيّل) إلى 12 عمود لكل منها نفس النسبة 
المئويّة من عرض الصفحة CAS‏ , و بذلك فهي تتيح للمصمم أن يقوم بتوزيع عناصر daia‏ 
على الأعمدة الاثني عشر (افتراضيّاً) أو على عدد أقل من الأعمدة. 

كما تتيح Bootstrap‏ جعل أحد الأعمدة بعرض عمودين مجتمعين أو ثلاثة أعمدة مجتمعة أو 
أربعة أو خمسة أو ستة أو سبعة أو ثمانية أو تسعة أو عشرة أو أحد عشر أو إثنى عشر و ذلك 
من خلال class‏ مختلف لكل Alla‏ من الحالات المطلوبة بحيث يكون اسم ال Class‏ ينتهي برقم 
يعبّر عن عدد الأعمدة التي Clings‏ مساحتها العرضيّة , يوضّح الجدول التالي أسماء هذه ال 


.Classes 
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ï]‏ عشر عمودا 


بالطبع لا ننسی أن نذكر čj‏ شبكة Bootstrap‏ تسمح بإنشاء أكثر من توزيع شبكي في نفس 
الصفحة و ذلك من خلال تقسيم الصفحة إلى مجموعة من الأسطر لكل سطر منها ال 1355© ذو 
الاسم FOW‏ , تعرض الشيفرة التالية Gas‏ استخدام شبكة Bootstrap‏ في sic‏ أسطر مختلفة: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap على شبكة‎ Jls daio</title> 


<l== Bootstrap ستايل. الت‎ amád==> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 


<!-- jQuery تضمین‎ --> 
<script src="js/jquery.min.js"></script> 


Ses 


</head> 


<body> 


<div class="row"> 


BOOtstrap سکریت.‎ (ana ==> 
<script src="js/bootstrap.min.js"></script> 


<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
</div> 


<div class="row"> 


<div 


class="col-md-8">. 


col-md-8</div> 
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<div class="col-md-4">.col-md-4</div> 
</div> 
<div class="row"> 
<div class="col-md-4">.col-md-4</div> 
<div class="col-md-4">.col-md-4</div> 
<div class="col-md-4">.col-md-4</div> 
</div> 
<div class="row"> 
<div class="col-md-6">.col-md-6</div> 
<div class="col-md-6">.col-md-6</div> 
ار‎ 


</body> 


s/ html> 


الشيفرة 4 : كيفيّة استخدام شبكة Bootstrap‏ 


القیم المعرفة مسبقاً للواصفة Class‏ في Bootstrap‏ 


لمزید من المعلومات عن قيم ال classes‏ الخاصة ب Bootstrap‏ انظر الرابط التالي: 


http: //getbootstrap.com/css/ 


0 الملائمة للغة العربيّة 


آخر ما يجب أن نذكره عن Bootstrap‏ هنا هو توفر نسخة خاصة باللغات GIS‏ اتجاه الكتابة من 
اليمين إلى اليسار , كاللغة العربية , و هي مماثلة تماماً من حيث الاستخدام لما تمّ شرحه سابقاً Y)‏ 


آتها معدّلة بحيث تعرض اللغة العربية بسلاسة , تتوفر هذه النسخة على الرابط: 


http: //github.com/ratnic/bootstrap—rtl 


المبحث الثالث: مفهوم ال CORS‏ في طلبات ال AJAX‏ 


ve 


مقدمة 


يعلم جمیع مبرمجي الویب مقدار الأهميّة الذي تحظی به تقنيّة ال AJAX‏ بالنسبة لتطبیقات الویب 
العصرية , كيف لا و هي النقنية التي قرّبت المسافة بين تطبیقات الویب web applications‏ و 
تطبیقات سطح المکتب Y desktop applications‏ من Cus‏ واجهات الاستخدام GUI‏ فقط , بل 
لأتها أضافت shall‏ لصفحات الویب الثابتة Static pages‏ بمنحها قدرة التحدیث الذاتي دون 


الحاجة لتحدیث کامل الصفحة ما يعني السرعة و المرونة في العرض. 


ES‏ معظم مبرمجي الویب لا یعلمون E)‏ متصفحات الویب جمیعها مبرمجة لندعم القاعدة الأمنيّة 
المعروفة باسم سياسة نفس المصدر " same-origin policy‏ بشکل افتراضي"" , ما يعني أن 
المتصفح سیمنع iaia Ñj‏ ويب من il chal‏ طلب AJAX‏ لمصدر بیانات ينتمي لنطاق 
domain‏ مختلف عن نطاق الصفحة الأصلي Y‏ یعتبر أي طلب من هذا النوع طلباً غير شرعی 


أو محاولة لاختراق النطاق الثاني“ , و هذا الأمر جيّد في الحالات العاديّة. 


U‏ بالنسبة للتقنيّة التي سيناقشها هذا الكتاب LE‏ سنكون في بعض برمجيّاتنا مضطرّين حتماً 
لإجراء طلب من نطاق إلى نطاق مختلف , لا لشيء سوى GY‏ تطبيقنا سيعمل في نهاية المطاف 
كصفحة ويب ستاتيكيّة ضمن النطاق الافتراضي لمتصفح الهاتف المحمول بينما قد نحتاج أحياناً 
لإجراء معالجة ما على نطاق موقع ويب بعيد باستخدام AJAX‏ و هو ما سيتسبب بفشل الطلب ما 


لم نقم بتفعيل مبدأ ال CORS‏ ضمن مخدمنا البعيد. 


13 انظر http: //en.wikipedia.org/wiki/Same-origin_policy‏ 
“ حتّى و إن قام أحد المتحاذقين بالتحايل و إرسال الطلب باستخدام شيفرة برمجيّة خاصَة Zi‏ معظم المخدّمات 


ستمنع الطلب Laj‏ ! 


مثال: في تطبيقي الخاص بمشروع "لفراهيدي — si "www.faraheedy.com‏ عملیات المعالجة 
جمیعها على المخذم البعید مما يعني أنّ التطبیق الخاص بالأجهزة المحمولة ليس Y)‏ واجهة Jay‏ 


و عرض فقط !. 
تفعیل CORS‏ على المخذم و الرّبون 


CORS‏ هي اختصار Cross-Origin Resource Sharing J‏ آو ما بترجم إلى مشاركة 
المصادر مختلفة النطاقات ”أ , و التي نتعکس te‏ بالسماح لصفحة ويب في نطاق ما chal‏ 
طلب AJAX‏ لمصدر آخر في نطاق مختلف. 


و لتفعیل ال CORS‏ من طرف المخدم Server‏ لا نحتاج Uli‏ سوی لاضافة الواصفة Access-‏ 
Control-Allow-Origin‏ إلى ترویسات الاستجابة Response headers‏ الخاصة بصفحات 


الویب التي نريد من تطبیقنا أن یتخاطب معها باستخدام طلبات ال „AJAX‏ 


و zu‏ ذلك في لغة PHP‏ على سبیل المثال عن طریق وضع الشيفرة التالية في بداية الصفحة: 


header ("Access-Control-Allow-Origin: *"); 


الشيفرة 5: تفعیل CORS‏ في PHP‏ 


و في y ASP.NET‏ تفعیل CORS‏ عن طریق وضع الشيفرة التالية: 


Response. AppendHeader ("Access-Control-Allow-Origin", "*"); 


ASP.NET في‎ CORS Jai :6 الشيفرة‎ 


15 ترجمة مصطلح Cross-Origin Resource Sharing‏ إلى مشاركة المصادر مختلفة النطاقات" اجتراح 
اجترحته أنا بعد أن بحثت و لم أجد أحداً قبلي قد سبقني إلى ترجمة هذا المصطلح الجديد و لم أعمد إلى ترجمة 
الصطلح معجميّاً بل حاولت أن تكون ترجمتي متعلّقة بشكل مباشر بالطبيعة الوظيفيّة لهذا المفهوم , و الله أعلم. 


و كما نلاحظ ól‏ الهدف من التعلیمات البرمجيّة الظاهرة في الحالین هو إسناد القيمة * (نجمة) 
للواصفة Access-Control-Allow-Origin‏ و ذلك بهدف السماح ¿sY‏ مصدر بطلب هذه 
الصفحة jar‏ النظر عن نطاقه. 

Ui‏ لتفعیل CORS‏ من طرف الزیون Client‏ و لمن سیستعمل jQuery Mobile‏ في تطبیقه 
آنصح باضافة الشيفرة التالية في بداية الصفحة التي سيتمٌ إجراء طلبات AJAX‏ فیها: 


<script type="text/javascript" charset="utf-8"> 
S( document ).bind( "mobileinit", function() { 


S.support.cors = true; 
S.mobile.allowCrossDomainPages = true; 
S.mobile.pushStateEnabled = false; 
}); 
“/acript> 


الشیفرة 7: CORS Jai‏ من Age‏ الزبون باستخدام jQuery Mobile‏ 
للمزید مع المعلومات عن ال CORS‏ یمکنکم الاطلاع على الموقع التالي: 


www.enable-cors.org 


خاتمة الفصل 


لم يكن هدف هذا الفصل بالطبع التعمّق بشکل Jai‏ في JS‏ من jQuery Mobile‏ و 
Gaili Bootstrap‏ في میزاتهما LIS‏ قد یحتاج لکتاب مستقل ربّما تسمح الأيّام القادمة بکتابته y‏ 
I‏ في سياق هذا الکتاب فقد جری المرور علیهما من باب العلم بالشيء , LS‏ لم يكن هدف 
المبحث الأخير من هذا الفصل عرض التفاصیل التقنية الدقيقة Ian‏ لمفهوم ال CORS‏ و Lal‏ 
اكتفيث بذکر خلاصة الموضوع مما سنحتاج إليه في سياق هذا الکتاب , و Lal‏ الآن فنحن جاهزون 


للبدء بالحدیث عن التقنيّة الأساسيّة التي یناقشها هذا الکتاب ألا و هي ini‏ 00006020 المقدمة 


من شركة ‚Adobe‏ 


الفصل الثاني 


PhoneGap أساسيّاث‎ 


Chapter. 2 


PhoneGap Essentials 


2 e 


مقدمه 


يناقش هذا Jail‏ أساسيّات ipi‏ 0۳006020 حیث يبدأ بالتعریف بها ثمّ يعرض كيفيّة تثبیتها و 
البدء باستخدامها مع الأمثلة الأولى البسيطة لإعطاء تصوّر أفضل عن ماهيّتها و AUT‏ عملها ai,‏ 
يعرض dank‏ تحزيم و نشر التطبيقات المكتوبة باستخدام تقنيّة phoneGap‏ و تحويلها إلى 
تطبيقات قابلة للتثبيت على منصّة أيّ هاتف محمول. 


ما هي تقنيّة phoneGap‏ ؟ 


في التعريف phoneGap ġ‏ هي إطار عمل برمجيّ Framework‏ يتيح لمطوّر الويب إنشاء 
تطبيقات ويب Gale‏ باستخدام 5 HTML‏ و 3 CSS‏ و JavaScript‏ و من Š‏ تحويل هذه 
التطبيقات إلى تطبيقات أصيلة Native Applications‏ تعمل على معظم منصّات الأجهزة 
المحمولة الذكيّة الحديثة و تستفيد من كامل القدرات البرمجيّة لأنظمة نشغیلها Operating‏ 
Systems‏ العتاديّة لعتادها الصلب Hardware‏ , يعرض الجدول التالي الميزات التي las‏ 


0 في كل نظام تشغيل من أنظمة تشغيل الأجهزة ASM‏ الأكثر شهرة 1° 


Bada Android | BlackBerry Windows | Symbian 
Phone 
Y Y Y Y J Y Y مقیاس‎ 


E التسار:‎ 
Y Y Y Y Y Y Y 
Y Y Y Y Y Y x 
Y Y Y Y X Y Y 


‚http: //phonegap.com/about/feature انظر‎ ۴ 


APA o 
Y Y Y Y Y Y Y الموقع‎ 


الجغرافي 
ا لیس 


التنبیه الصوتی 


E7 بطاقة‎ 


الجدول 2 : المیزات التي تتیحها phoneGap‏ لكل نظام تشغيل مختلف 
انطلق مشروع phoneGap‏ في البداية كمشروع مغمور تحت اسم مختلف ألا و هو مشروع 
Cordova‏ الذي طورته شركة Nitone‏ الصغيرة و تبرّعت به لاحقاً لصالح مؤسّسة Apache‏ 
المشهورة لينشر مفتوح المصدر تحت رخصة الأخيرة ,8 و مع بداية عام 2011 و استحواذ شركة 
Adobe‏ العملاقة على شركة Nitobe‏ تحوّل Cordova‏ من مشروع مفتوح المصدر مغمور إلى 
phoneGap‏ المشروع ¿a all‏ مفتوح المصدر ذائع الصيت و كل ذلك بدعم كبير من شركة 
6 العملاقة. 17 


‚http: //phonegap.com و انظر أيضاً‎ https: //cordova.apache.org انظر‎ '7 


تثبیت phoneGap‏ و البدء بالعمل 


للبدء باستخدام phone Gap igi‏ يجب أن نقوم Y‏ بتحمیل أحدث |صدار منها من خلال موقعها 


الرسمي http://phonegap.com/install‏ تم الضغط على اسم أحدث إصدار منها LS‏ توضح 


الصورة التالیة: 


rchives 
بد یب ینز‎ 8.0 5 ESA 2.7.0 5 رو یل‎ 2.6.0 
a 2.5.0 5 ی‎ 240 9 ie 3 3.0 
وود‎ = = NO ace 2 O 2 un 
ER | E | EE 
_PhoneGap 1.7.0 Are = ویب‎ Led 


الصورة 4 : تحمیل phoneGap‏ من موقعها الرسمي 


بعد انتهاء التحميل Ka,‏ يح یفترض أن یصبح بحوزنك آخر نسخة من phoneGap‏ على 
شکل ملف مضغوط Zip itna‏ یعرض المخطط التالي aa}‏ محتویاته بعد فك ضغطه: 


| -doc 
|-1ib 
| ---android 


| ---bada 

| ---badaWac 

| ---blackberry 
| ---ios 


| - --symbian 
|---webos 
|---windows-phone 


الشکل التوضيحي 3 : آهم محتویات ملف phoneGap.zip‏ بعد فك ضغطه 
يحوي المجلّد Doc‏ توثيقاً مفصّلاً لمشروع phoneGap‏ على شکل موقع ويب يمكن تصفحه دون 
اتصال Offline website‏ , بینما يحوي المجلد Lib‏ أمثلة فعليّة على USS‏ قوالب لمشاريع عمليّة 
Templates‏ تعرض کبفية استخدام PhoneGap‏ في التطویر لأشهر منصات الهواتف المحمولة 
الذكيّة بحیث يكون کل قالب في مجلّد مسنقل يحمل اسم نظام التشغیل الشهیر . 


حسناً , بعد تحمیل أحدث نسخة من 00006020 و فك ضغطها كما بيّنا سابقاً , سنقوم بكتابة 
تطبیقنا للهاتف المحمول على شکل صفحات HTML‏ تقليديّة نتضمن الملف cordova.js‏ الذي 
تستطیع نسخه من أيّ مجلّد من المجلّدات ذات الاسم WWW‏ الموجودة في (sl‏ مجلّد فرعي من 
محتویات المجلد الرئيسي Lib‏ الذي ذکرناه في الأسطر أعلاه , سیکون لهذه الصفحة الشکل العام 
التالی: 


<!DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8" /> 

<meta name="format-detection" content="telephone=no" /> 

>-- تحدید حجم الشاشة الابتد ائي لملائمة شاشات الهو اتف AS SiS)‏ --!> 

<meta name="viewport" content="user-scalable=no, initial- 
scale=1, maximum-scale=1, minimum-scale=1, width=device-width, 
height=device-height, target-densitydpi=device-dpi" /> 

<link rel="stylesheet" type="text/css" href="css/index.css" /> 


a 


<title>Hello World</title> 
</head> 
<body> 
<div class="app"> 
<!-- محتوى الصفحة‎ --> 
7A 
<!-- phoneGap inisa تضمین‎ ==> 
<script type="text/javascript" src="cordova.js"></script> 
<script type="text/javascript"> 
// ستکون هنا‎ phoneGap ul „aus 
ل ار ار‎ 
</body> 
</html> 


الشيفرة 8 : الشکل العام لصفحة HTML‏ تطبیق phoneGap‏ 


الأمر الوحید المميّز في الشيفرة البرمجيّة السابقة هو Wi‏ قمنا بتضمین الملف cordova.js‏ في 
نهایات جسد الصفحة (منطقة ال (Body‏ و هذا الأمر قد يبدو Liye‏ على بعض Y) HTML Gts‏ 
ail‏ مسموح في الحقيقة , بل ól‏ بعض المبرمجین المحترفین ينصحون بتجئب وضع شیفرات ال 
JavaScript‏ في منطقة ال LS Head‏ كان متعارفاً عليه سابقاً و وضعها Lala‏ في نهایات منطقة 


8 Body ال‎ 


على A‏ حال , بعد تضمین الملف Cordova.js‏ في صفحتك سیصبح بمقدورك التعامل من خلال 
شيفرات JavaScript‏ مع منصة عمل الهاتف المحمول بشکل کامل y,‏ هو ما سنعرض كيفية 
القيام به بالتفصيل في الفصل القادم , مّا حالیاً فنستطيع القول čj‏ تطبيق PhoneGap‏ الأوّل 


الخاص بك قد أصبح جاهزاً و هو تطبيق رائع Y‏ يقوم بأي شيء dab‏ الآن © 
نشر تطبيقات phoneGap‏ إلى الهواتف المحمولة الذكيّة 


بعد إنجاز تطبيقك بشكل كامل يبقى أن تقوم بنشره على شکل ملفات تنفيذية كل واحد منها موجّه 
للعمل على منصة مختلفة من منصات الهواتف المحمولة iaid apk)‏ عمل Android‏ و «¡pk‏ 
لمنصّة عمل IOS‏ ... إلخ إلخ). 


http: //kalshamaa.wordpress.com/2011/08/01 انظر‎ 15 


هناك طریقتان لنشر vigla‏ 


« الأولى تتطلّب أن تقوم بتحمیل جمیع ال SKDS‏ الخاصة بجمیع منصّات العمل التي ترغب 
بالنشر إليها و من 5 تشغيل أدوات النشر المرفقة SDK JS‏ على حدة و هو ما Ally‏ 
بمعنى آخر ales‏ العمل على جميع ال SKDS‏ و بذل الموارد اللازمة لذلك كافة , و EY‏ 
من آنصار السهولة و التبسیط ساتشاهل هذه الطريقة نهائیاً و آعرض الطريقة الثائية 
السهلة. 

Y و‎ HTML تقوم بضغط جمیع صفحات ال‎ gh طريقة النشر الثانية تتمتّل بكل بساطة‎ o 
الخاصة بتطبيقك في ملف 210. وحید , بعد أن تضيف إليها بعض ملقات‎ CSS و ال‎ JS 
على سبیل المثال) و هي ملفات سنأتي‎ config.xml الخاصّة (کالملف‎ XML ال‎ 
لاستعراض الهدف منها بالتفصیل في فقرات لاحقة , انظر الصورة:‎ 


d+ MUKHTAR لل‎ 
(gh tt 4 


namon‏ جه 


sd Date افو‎ 12/3/2009 SI) PM- Ii.. Cute خمنبسء‎ 121/3014 2:50 014 - 110/2004 12:33 PM 


ملحوظة: يجب أن تسمّي الصفحة الرئيسية الخاصة بمشروعك index.html aul‏ و تضع ملفات ال 


XML‏ الخاصة معها بنفس المستوی , ما عدا ذلك بإمكانك توزیع مشروعك وفق بنية الملفات التي 


تختارها. 


بعد أن یصبح هذا الملف المضغوط Gale‏ نقوم بزيارة خدمة النشر المجانيّة المقّمة من 


Adobe 45,5‏ على الرابط: 


http: //build.phonegap.com 


و js‏ تقوم بعمل حساب مجاني ana‏ من خلال )153 الضغط على الرابط Register‏ 
fi‏ تقوم بعد الاشتراك بنجاح بتسجیل الدخول و اختیار الأمر New app‏ من التبویب 
Apps‏ ثمّ تقوم برفع الملف المضغوط (.zip Cale)‏ الذي أعددناه سابقاً و الذي يحوي 
مشروعك و نتتظر قلیلاً لتظهر لك واجهة تحوي روابط تحمیل النسخ القابلة للنشر من 
مشروعك علی alicia‏ امختلفة كما تظهر الصور: IN‏ 


۲ اهيدي موبایل‎ pall 


Ths ap > isnt ung the latest version of PhoneGap. We 


الصورة 5: النسخ النهائية من تطبيقك بعد بنانها بخدمة النشر المجانية المقدمة من Adobe‏ 


عند هذه النقطة تستطیع تحمیل صيغة الملف المناسبة لهاتفك المحمول و رفعها على 
الهاتف و سیعمل تطبيقك كأيّ تطبیق عادي لتبدأ اختباره و استخدامه , مبارك مبارك © 


اختبار تطبیقات phoneGap‏ على الأجهزة المحمولة 


بعد إنجاز تطبيقك بشکل کامل و نشره كما ناقشنا في الفقرة 
السابقة , تستطیع call‏ باختباره gash‏ ثلاث طرق: 

الطريقة الأولى: نقل الملف التنفيذي المناسب لمنصّة عمل 
هاتفك المحمول إلى هانفك المحمول الحقيقي و تشغيله بشکل 
اعتيادي LS‏ تشعّل ¿ol‏ تطبیق آخر و البدء باختباره. 

الطريقة الثانیة: توفر کل شركة من الشرکات المصتعة 
لأجهزة المحمول الذكيّة محاكياً لهواتفها المحمولة y,‏ المحاكي 
عبارة عن برنامج حاسوبي يعمل على الحاسب الآليّ العادي 


3 ls he a e ذکی افتراضي فى‎ J Je يكون بمثابة‎ 4 


يعرض الجدول التالي آشهر المحاکیات و روابط تحمیلها: 


TRR‏ رابط التحميل 
http: //developer.android.com/sdk Android‏ 
http://visualstudiogallery.msdn.microsof 10‏ 
t.com/6bed5adb-1d6a-483d-9e22-‏ 
http: //dev.windowsphone.com/en- Windows Phone‏ 
us/downloadsdk‏ 
http: //us.blackberry.com/sites/developer BlackBerry‏ 


s/resources/simulators.html 
الجدول 3 : آشهر المحاکیات و روابط تحمیلها‎ 


تعرض الصور التالية بعض 
المحاکیات لأجهزة ال Android‏ و ال 
۵ و ال Windows Phone‏ 


الطريقة الثالثة: في الواقع كنت قد وقعت عقد نشر كتابي هذا و e‏ لنشره في الیوم التالي و هو 
لا يشرح سوی طریقنین لاخنبار التطبیق لأفاجئ في نهاية an‏ بتاریخ 2014-11-10 بإطلاق 
Mozilla‏ نسخة جديدة خاصة بالمطوّرین من متصفحها الشهیر Firefox‏ , و فرحت cli]‏ 
استكشافي لها آتها تأتي مرفقة بمحاكي خاص بها یستطیع اختبار تطبیقات phoneGap‏ و YJ‏ 
Sl‏ رأيت GF‏ هذا المحاكي خفیف a‏ و لا بستهلك من موارد الحاسب الالي الا جزءاً يسيراً مما 
تستهلکه المحاکیات التقليديّة لنشرت كتابي دون كتابة هذه الفقرة ! 


لتجرية هذا المحاكي قم Yj‏ بتحميل نسخة Firefox developers‏ من الرابط: 


https: //www.mozilla.org/en—US /firefox/developer/ 


ثمّ و بعد تشغیله اضغط على SHIFT+F8‏ للوصول لنافذة à, Firefox WebIDE‏ اختر aaj‏ 
المحاکیات من قائمة Select Runtime‏ ليبدأ المحاكي بالعمل. 


Project Runtime View 


5 Open App v O Select Runtime w 


Canî see your dewce? 


1 © 


a 


Firefox OS 13 
Install Simulator 


4 


Remote Runtime 
Local Runtime 
Chrome Desktop 


۲ ۲ 0 5 


Safari on iOS 


Firefox Developers المتصفح‎ Slaa :6 الصورة‎ 


الآن و لتحمیل تطبيقك للمحاكي , اختر الأمر open packaged app‏ من القائمة browse‏ 


لتحميل تطبيقك إلى المحاكي و تجريبه. 


ملحوظة: نظام التشغيل الخاص بهذا المحاكي اسمه Firefox OS‏ و phoneGap‏ تدعمه ‚Ulla‏ 


ملحوظات بشأن خدمة النشر phoneGap Build‏ 
لا بد عند رفع ملف مضغوط جدید لخدمة النشر الخاصة ب PhoneGap‏ و المقذمة من شركة 
6 من مراعا: النقاط التالیة: 
Y 1‏ تضمّن الملف cordova.js‏ ضمن الملف المضغوط الذي سترفعه GY‏ خدمة النشر 
un‏ آحدث se.‏ منه ید کر تلقائي. 
2 في جميع صفحات HTML‏ الخاصة بك y‏ التي تحوي تضميناً للملف cordova.js‏ امسح 
الأسطر البرمجية الخاصة بالتضمین و استبدلها بالسطر : 


<script src="phonegap.js"></script> 


الشيفرة 9 : التضمین الجدید لمكتبة phoneGap‏ قبل نشر التطبیق 
adi al 3‏ بوضم ملفات ال XML‏ الخاصة ضمن lil‏ المضغوط ستقوم خدمة النشر 


باستخدام إعدادات افتراضيّة نيابة عنك. 


4 من المهم أن تقوم بكتابة أي أحداث تتعامل مع منصّة عمل الهاتف المحمول في الحدث 
الخاص onDeviceReady‏ و الذي يأخذ الشكل العام التالي: 


<head> 


<script type="text/javascript" charset="utf-8" 
src="phonegap.js"></script> 

<script type="text/javascript" charset="utf-8"> 

document.addEventListener ("deviceready", onDeviceReady, 
false); 


function onDeviceReady() { 


شيفم 85 a Ss‏ ۸7 
} 
ECEBÊ‏ 
</head>‏ 
الشيفرة 10: الشكل العام لشيفرة phoneGap‏ المخصصة لخدمة Build‏ 


ملفات ال XML‏ الخاصة 


تعتمد خدمة النشر الخاصة ب PhoneGap‏ و التي نقدمها شركة Adobe‏ على مجموعة من 
ملفات ال xml‏ الخاصة لتوليد ملفات package files ajail‏ الخاصة JS:‏ منصة dee‏ من 
منصّات العمل التي ندعمها , و ذلك بهدف تشغیل E‏ المیزات التي بحتاجها تطبيقك على US‏ 
ilaia‏ عمل مستهدفة y,‏ آهم هذه الملقات de‏ الاطلاق هو الملف .config.xml‏ 


يحتوي الملف config.xml‏ على معلومات أساسيّة متعلّقة بالتطبیق المراد نشره كاسم التطبیق , و 
آیقونته بأحجامها المختلفة , و اسم مولفه و عناوینه , و الشاشة الترحيبيّة الخاصة به بأحجامها 
المختلفة , و الصلاحیّات التي یحتاجها التطبیق , و الاضافات التي نريد تفعیلها في هذا التطبیق 
... إلخ , تعرض الشيفرة التالية مثالاً بسيطاً :config.xml Cala‏ 


<?xml version="1.0" encoding="UTF-8"?> 


<widget xmlns = "http: //www.w3.org/ns/widgets" 
xmlns:gap = "http: //phonegap.com/ns/1.0" 
id "com.phonegap.helloPhoneGapApp" 
version = "1.0.0"> 


<name>Hello PhoneGap App.</name> 


<description> 
Hello PhoneGap sample application. 
</description> 


<author href="http://www.facebook.com/Mukhtar.SS" 
email="mokhtar ss@hotmail.com"> 
Mukhtar SayedSaleh 
</author> 


<icon src="lconm.png" ¿> 


<gap:splash src="res/screen/android/screen-ldpi-portrait.png" 
gap:platform="android" gap:qualifier="port-ldpi" /> 


</widget> 


الشيفرة 11: مثال بسيط لملف config.xml‏ 


= 


كما تلاحظ فإنّ الملف آعلاه یخبرنا éj‏ التطبیق الجدید اسمه Hello PhoneGap‏ و معرفه 


الخاص هو com.phonegap.helloPhoneGapApp‏ 
إنّ معرفة هذه المعلومات الأساسيّة كافية لحد هذه المرحلة Lal,‏ في الفصل القادم من هذا الکتاب و 


مع استعراضنا لكل ميزة من میزات phoneGap‏ سنعرض الأسطر التي قد نحتاج لاضافتها لنهاية 
ملف ال config.xml‏ كي يعمل التطبیق بشکل صحیح. 


الفصل الثالث 


۷0 في العمق 


Chapter. 3 


PhoneGap in-depth 


4 


مقدمة 

يناقش هذا الفصل كيفيّة توظيف phoneGap‏ لتعطي صفحات الويب العاديّة القدرة على التعامل 
مع كامل iai‏ العمل Platform‏ للجهاز ¿SA‏ كالكاميرا و وسائط التخزين و تجهيزات ال 
Bluetooth‏ و ال WiFi‏ و سجل الأسماء و ال Microphone‏ و السمّاعة ... إلخ. 

یت الوصول لكل جزء من أجزاء منصّة العمل للجهاز الذکی بواسطة إضافة plug-in‏ خاصّة من 
إضافات phoneGap‏ و سوف نخصّص فقرة مستقلّة لكل إضافة من إضافات phoneGap‏ 
الأصيلة على حدة عارضين الشيفرات البرمجيّة الخاصة بالتعامل مع تلك الإضافة , إضافة لما 
نحتاج لإضافته لملف ال config.xml‏ و ملف ال plugins.xml‏ من أسطر برمجيّة ليعمل التطبيق 
بشكل صحيح , و سنبدأ حديثنا ذلك بالإضافة التي تتيح لنا التحكّم بميزة الاهتزاز Vibration‏ 
الخاصنة بالهاتف ¡Jill‏ 


إضافة التحکم بميزة الاهتزاز Vibration plug-in‏ 
للتحكّم بميزة الاهتزاز الخاصّة بالهاتف المحمول نقوم بمايلي: 


1 في الملف config.xml‏ نضیف السطر التالي: 


<gap:plugin name="org.apache.cordova.vibration" version="0.3.11" /> 


الشيفرة 12 :تفعیل إضافة التحکم بالاهتزاز في ملف config.xml‏ 
GY! 2‏ نستطيع التعامل مع الاهتزاز الخاص بالهاتف المحمول من خلال شيفرة java script‏ 
عن طريق الدالة البرمجيّة navigator.vibrate()‏ لتفعیل الاهتزاز حسب القيمة المررة لها 
و التي تعبر عن زمن الاهتزاز بالميللي ثانية أو عن مصفوفة آرقام تعبّر عن آزمنة متواترة 


من الاهتزاز و التوقف. 


3. و الدالة navigator.notifications.cancelVibration()‏ لإلغاء أي اهتزاز يعمل ‚Ulla‏ 


انظر المثال التالي: 


<html> 
<head> 

<title>vibration example</title> 

<script type="text/javascript" charset="utf-8" 
src="phonegap.js"></script> 

<script type="text/javascript" charset="utf-8"> 

document.addEventListener ("deviceready", onDeviceReady, false); 

function onDeviceReady() { 

alert("I am ready, Click on links"); 


} 


function vibrate(){ 
navigator.vibrate (3000); 


}; 


function vibrateSeries(){ 
navigator.vibrate([1000,2000,1000,2000,1000,2000]); 
}; 
I Sori pce 
</head> 
<body> 
<h1>Example</h1> 
<p onclick="vibrate()">Vibrate for 3 seconds</p> 
<p onclick="vibrateSeries ()">Vibrate every 2 seconds</p> 
</body> 
</html> 


الشیفرة 13: مثال على (ضافة التحکم بالاهتزاز 


ملحوظة: بإمكانك تحمیل الشيفرة البرمجية الكاملة الخاصة بهذا المثال و جمیع الأمثلة الأخرى التي سترد في هذا 
dail‏ من خلال صفحة الکتاب على موقع التواصل الاجتماعي facebook‏ على العنوان: 
https: //www.facebook.com/phonegapAR‏ 


إضافة التحکم بالکامیرا Camera plug-in‏ 


„Sail‏ بكاميرا الهاتف المحمول نقوم بمايلي: 


1 في الملف config.xml‏ نضیف السطر التالي: 


<gap:plugin name="org.apache.cordova.camera" version="0.3.2" /> 


الشيفرة 14:تفعیل إضافة التعامل مع الکامیرا في phoneGap‏ 
GY! 2‏ نستطیع التعامل مع الکامیرا الخاصة بالهاتف المحمول من خلال شيفرة java script‏ 


عن طریق الدالة البرمجيّة 961۳0۲6 Gla‏ التوقیع: 
navigator.camera.getPicture(onSuccess, 00۴۲۲۵۲, Options );‏ 


لالتقاط صورة و من نم التعامل معها عن طریق دالة onSuccess‏ التي ستنفذ فور نجاح 
دالة الالتقاط , انظر المثال التالي: 


<html> 
<head> 
<title>Camera example</title> 
<script type="text/javascript" charset="utf-8" 
src="phonegap.js"></script> 
<script type="text/javascript" charset="utf-8"> 
document.addEventListener ("deviceready", onDeviceReady, 
false); 
function onDeviceReady() { 
alert("I am ready, Click on links"); 


} 


function takePic(){ 
navigator.camera.getPicture (onSuccess, onFail, { quality: 
30; 
destinationType: Camera.DestinationType.DATA URL 
}); 
}; 


function onSuccess(imageURI) { 


var image = document .getElementByld('img'); 
image.src = imageURI; 


function onFail(message) { 
alert('Failed because: 


+ message); 
} 
<script” 
</head> 
<body> 
<h1>Example</h1> 
<p onclick="takePic()">take picture</p> 
<img id="img" /> 
</body> 
</html> 


الشيفرة 15: مثال على (ضافة التحکم بالکامیرا في PhoneGap‏ 


اضافة قراءة حالة Battery plug-in 44 Ua)‏ 
لقراءة حالة البطاريّة نقوم بمايلي: 


1 في الملف config.xml‏ نضیف السطر التالي: 


<gap:plugin name="org.apache.cordova.battery-status" version="0.2.11" 
/> 


الشیفرة 16: تفعیل (ضافة قراءة Alla‏ البطاريّة في phoneGap‏ 
GY! 2‏ نستطيع قراءة Alla‏ البطارية الخاصة بالهاتف المحمول من خلال شيفرة java script‏ 


عن طریق الحدث البرمجي batterystatus‏ انظر المتال التالي: 


<html> 
<head> 
<title>buttery example</title> 
<script type="text/javascript" charset="utf-8" 
src="phonegap.js"></script> 
<script type="text/javascript" charset="utf-8"> 
document.addEventListener ("deviceready", onDeviceReady, 


false); 
function onDeviceReady() { 
alert ("I am ready, watch battery status"); 
window.addEventListener ("batterystatus", onBatteryStatus, 


false); 


} 


function onBatteryStatus (info) { 
document.getElementById('status') .innerHTML = "Level: " + 
info.level + " isPlugged: " + info.isPlugged; 
} 
</script> 
</head> 
<body> 
<h1>Example</h1> 
<p id="status">Battery status</p> 
</body> 
</html> 


الشيفرة 17:مثال على قراءة حالة البطارية في phoneGap‏ 


إضافة قراءة معلومات الجهاز Device plug-in‏ 


لقراءة معلومات الجهاز نقوم بمايلي: 


1 في الملف config.xml‏ نضیف السطر التالي: 


<gap:plugin name="org.apache.cordova.device" version="0.2.12" /> 


الشيفرة 18: تفعیل (ضافة قراءة معلومات الجهاز في PhoneGap‏ 
GV! 2‏ نستطیع قراءة حالة الجهاز الذكي الخاص بنا من خلال شيفرة java script‏ عن 
طریق الكائن البرمجيّ device‏ انظر المثال التالي: 


<html> 
<head> 
<title>device example</title> 
<script type="text/javascript" charset="utf-8" 
src="phonegap.js"></script> 
<script type="text/javascript" charset="utf-8"> 
document.addEventListener ("deviceready", onDeviceReady, 


false); 
function onDeviceReady() { 
alert ("I am ready to display device info"); 
document.getElementById('status') .innerHTML = 
"cordova version: " + device.cordova + "<br/>" + 
"device model: " + device.model + "<br/>" + 
"device platform: " + device.platform + "<br/>" + 
"device uuid: " + device.uuid + "<br/>" + 
"android version: " + device.version ; 
} 
و‎ 
</head> 
<body> 
<h1>Example</h1> 
<p id="status">device info</p> 
</body> 
</html> 


الشیفرة 19: مثال على قراءة معلومات الجهاز في phoneGap‏ 


إضافة سجل جهات الاتصال Contacts plug-in‏ 


للتعامل مع سجل جهات الاتصال نقوم بمايلي: 


1 في الملف config.xml‏ نضیف السطر التالي: 


<gap:plugin name="org.apache.cordova.contacts" version="0.2.13" />‏ 
الشیفرة 20: تفعیل إضافة سجل الأسماء في phoneGap‏ 


2 الآن نستطیع التعامل مع سجل جهات الاتصال الخاص بهانفنا ¿SU‏ من خلال شيفرة 
java script‏ عن طریق الکائن البرمجيّ navigator.contacts‏ انظر المتال التالي: 


<html> 
<head> 
<title>contacts example</title> 
<script type="text/javascript" charset="utf-8" 
src="phonegap.js"></script> 
<script type="text/javascript" charset="utf-8"> 
document.addEventListener ("deviceready", onDeviceReady, 


false); 
function onDeviceReady() { 
alert("I am ready, click on links"); 


} 


function write )( ) 
var myContact = navigator.contacts.create ({"displayName": 
"PhoneGapAR","addresses": "http://www.facebook.com/phonegarAR"}); 
} 
function pick () { 
navigator.contacts.pickContact (function (contact) { 
alert ) ' عط"‎ following contact has been selected:' + 
JSON.stringify(contact)); 
}, function (err) { 


alert('Error: ' + err); 
}); 
} 
script 
</head> 
<body> 
<h1>Example</h1> 


<p onclick="write">add phonegapAR contact !</p> 
<p onclick="pick">pick contact</p> 
</body> 
</html> 


الشيفرة 21: التعامل مع جهات الاتصال في phoneGap‏ 
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إضافة التحسّس لحركة الجهاز Device motion plug-in‏ 


يتم التعرزف على حركة الجهاز بناء على احدانیاته * و ۷ و Z‏ في الفضاء الديكارتي رو ay‏ تحدید 
الحركة بحدوث تغير في الاحدانیات , و seha‏ هذه الاحدانیات نستعمل الاضافة device‏ 
7 باتباع الخطوات التالية: 


1. في الملف config.xml‏ نضيف السطر التالي: 


<gap:plugin name="org.apache.cordova.device-motion" version="0.2.10" 


/> 


الشيفرة 22: تفعیل إضافة التحسس لحركة الجهاز في phoneGap‏ 
2 الآن نستطیم التعامل مع حئاس الحركة الخاص بهاتفنا ¿SU‏ من خلال شیفرة java‏ 


script‏ عن طريق الکائن البرمجي navigator.accelerometer‏ انظر المتال التالي: 


<html> 
<head> 
<title>device motion example</title> 
<script type="text/javascript" charset="utf-8" 
src="phonegap.js"></script> 
<script type="text/javascript" charset="utf-8"> 
var watchID; 


document.addEventListener ("deviceready", onDeviceReady, 
false); 
function onDeviceReady() { 
alert("I am ready , watch x and y and z while moving 
phone"); 
watchID = 


navigator.accelerometer.watchAcceleration (onSuccess, onError, { 
frequency: 1000 }); 
} 


function onSuccess (acceleration) 1 
document.getElementById("coor").innerHTML = 
"Acceleration X: ' + acceleration.x + '\n' + 
c 1 acceleration.y + '\n' + 
acceleration.z + '\n' + 
acceleration.timestamp + '\n'; 


"Acceleration Y: 
' 


"Acceleration Z: 
'Timestamp: ' 


+++ 


y; 


function onError() { 
alert('error!'); 


}; 


SGFLOES‏ ارت 
</head>‏ 
<body>‏ 


<h1>Example</h1> 
<p id="coor">watch me !</p> 


</body> 
</html> 


الشیفرة 23: مثال على قراءة حسناسات الحركة في phoneGap‏ 


اضافة قراءة معلومات الموضع الجغرافي للجهاز Geolocation plug-in‏ 


يتمّ التعتف على موقع الجهاز بناء على إحدائيّاته “ا و ۷ و 2 في الفضاء الديكارتي بالنسبة 
لخطوط الطول و العرض على سطح الكرة الأرضيّة و يتم تحدید المنطقة الجغرافية التي یوجد بها 
الجهاز بشکل داخلی بناء على معادلات رياضيّة معروفة و bira‏ مسبقاً لهذا الغرض 


للتعامل مع الاحدائیات الجغرافيِة للجهاز نستعمل الاضافة geolocation‏ باتباع الخطوات التالیة: 


1 في الملف config.xml‏ نضیف السطر التالي: 


<gap:plugin name="org.apache.cordova.device-motion" version="0.2.10" 


I> 


الشيفرة 24: تفعیل إضافة التحسس لحركة الجهاز في PhoneGap‏ 
الان نستطيع التعامل مع حساس الحركة الخاص بهاتفنا ¿Sl‏ من خلال شيفرة java‏ 
script‏ عن طریق الکائن البرمجي navigator.accelerometer‏ انظر المتال التالي: 


<html> 
<head> 
<title>device geolocation example</title> 
<script type="text/javascript" charset="utf-8" 
src="phonegap.js"></script> 
<script type="text/javascript" charset="utf-8"> 
document.addEventListener ("deviceready", onDeviceReady, 


false); 
function onDeviceReady() { 
alert("I am ready , watch coordinates after clicking 


ok") A 
navigator.geolocation.getCurrentPosition(onSuccess, 


onError); 


} 


function onSuccess (acceleration) 1 


document.getElementById("coor")..innerHTML = 

"Latitude: ' + position.coords.latitude 
+ '\n' + 

"Longitude: ' + position.coords. longitude 
+ '\n' + 

"Altitude: ' + position.coords.altitude 
+ '\n' + 

"Accuracy: ' + position.coords.accuracy 
+ '\n' + 

"Altitude Accuracy: ' + 


“| 


position.coords.altitudeAccuracy + '\n' + 


"Heading: ' + position.coords.heading 
+ ۲۱۲ + 
"Speed: ' + position.coords.speed 
+ ۲۱۲ + 
‘Timestamp: ' + position.timestamp 
+ '\n' 
}; 


function onError() { 
alert('error!'); 


}; 


</script> 
</head> 
<body> 
<h1>Example</h1> 
<p id="coor">watch me !</p> 
</body> 
</html> 


الشيفرة 25: مثال على التعامل مع الموقع الجغرافي في phoneGap‏ 
المزید من الاضافات 


Ás‏ خدمة PhoneGap Build‏ المقدّمة من شركة Adobe‏ عشرات بل مثات الاضافات , وددت 
لو Oi‏ في عرض الأمثلة على استخدامها جميعاً معلومة تقنيّة تضاف للقاری العزیز , و لهذا 
سأكتفي يما عرضته من A‏ علی الاضافات , لكتني سأشرح الخطوات العامة للتعامل مع أي 
(ضافة كمايلي: 


1 نقوم بالدخول لموقع الاضافات الخاصة بخدمة PhoneGap Build‏ المقدمة من Adobe‏ 
على الرابط التالي: ‚http: //build.phonegap.com/plugins‏ 


2 نختار الاضافة التي نرغب باستخدامها و ندخل إلى صفحنها. 
3 ننسخ شيفرة التضمین الخاصة بها و نضیفها إلى ملف config.xml‏ 


4. نستعمل الاضافة في صفحة ال index.html‏ بناء على توثیقها المعروض في موقعها. 
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خاتمة 


حسناً , بعرضنا لكيفيّة استخدام الإضافات نكون قد أنهينا حديثنا عن PhoneGap äi‏ و بالتالي 
أصبحنا قادرين على التعامل مع أي جزء من منصّة عمل الهاتف المحمول الخاص بنا بسهولة و 


يسر. 


و بذلك يكون الهدف الأساسي لهذا الكتاب قد تحقق بإذن الله و أصبح قارنه الكريم قادراً على بناء 
تطبيق متكامل لمعظم منصّات الهواتف المحمولة الذكيّة المعروفة اليوم في Walle‏ العربی. 


أسأل الله أن يتقبّل هذا العمل المتواضع خالصاً لوجهه الكريم و أن يكتبه صدقة Ayla‏ و يبقيه 
ESL‏ في الأرض ينفع الناس و أن يجعل علمي و اجتهادي من العلم الذي ينتفع به و أن يطيل 


عمري و gie‏ لي الظروف المناسبة AY‏ مشواري في نشر المزيد من الكتب التقنيّة العربيّة التي 


ختاماً , أشكركم , و أنوّه آتني ما زلت أتعلّم , و سأبقى , لذلك آرخب GL‏ استفسار أو اقتراح على 
بريدي الالکترونی mokhtar_ss@hotmail.com‏ أو على صفحة الكتاب على موقع التواصل 


الاجتماعي فيس بوك على العنوان facebook.com/phonegapAR‏ , و السلام علیکم و daa)‏ 


الله و بركاته. 
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الشیفرة 21: التعامل مع جهات الاتصال في Dissen phoneGap‏ 


الشیفرة 22: تفعیل إضافة التحسس لحركة الجهاز في ENTER phoneGap‏ هه( 
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فهرس الجداول 


الجدول 1 : القیم الممکن إسنادها للواصفة 0318-۳016 في jQuery Mobile‏ 9 و واه و 


الجدول 2 : المیزات التي نتیحها phoneGap‏ لكل نظام تشغیل مختلف 


الجدول 3 : أشهر المحاكيات و روابط تحميلها 0000095 


oE E E E S AE E E E هداء‎ y! 
E E OD E بين يدي الکتاب‎ 
1 kc OOOO EE ةذ‎ STEPE iha gui تطويرُ واجهات الاستخدام‎ 
LS ASS E E ARS SS مقدمة‎ 
ds GRAPHICAL USER INTERFACES واجهات الاستخدام الرسوميّة‎ 
1 0 5 RESPONSIVE WEB DESIGNS تصامیم الویب المتأقلمة‎ 
Ls ¡Query Mosie المبحث الاوّل - تقنيّة‎ 
idos JQUERY MosiLe كيفيّة استخدام‎ 
2 سا‎ AAA AAA JQUERY MOBILE الادوار الوظيفية المعرفة مسبقاً في‎ 
Pa EN EAA SE A EA awa EAS الملائمة للغة العربية‎ ¡Query MOBILE 
DAA BooTstrap المبحث الثاني - تقنیة‎ 
2 3 لم یت‎ RENNER NEN ام‎ Aree RET BooTstrap كيفيّة استخدام‎ 
Deere BOOTSTRAP نظام العرض الشبكي في‎ 
A ieia E RA BOOTSTRAP في‎ Class القيم المعرّفة مسبقاً للواصفة‎ 
O الملائمة للغة العربية تک ا‎ Bootstrap 
دس و‎ o AJAX في طلبات ال‎ cors المبحت الثالث: مفهوم ال‎ 
da مقذمة‎ 
P ARESE T E EAE على المخدّم و الژبون‎ cors تفعیل‎ 
IRA oía خاتمة الفصل‎ 
E EEEERIEIEIER PHONEGAP أساسيّات‎ 
SW eee ea ere area ae aT O ELLE erent er Caer TET مقدمة‎ 
SDR Ses f pHONEGAP 4255 ما هي‎ 
227 و البدء بالعمل‎ pHoneGap تثبيت‎ 
AL إلى الهواتف المحمولة الذكية‎ pHoneGap نشر تطبيقات‎ 


اختبار تطبيقات pHoneGap‏ على الأجهزة المحمولة De‏ 


AS EN PHONEGAP BUILD ملحوظات بشأن خدمة النشر‎ 
BU sas O ملفات ال × الخاصة اا‎ 
E E في العمق د10‎ PHONEGAP 
te E 00 مقدمة‎ 
De ee Er Eee VIBRATION PLUG-IN إضافة التحكم بميزة الاهتز از‎ 
A 1 OS Camera PLUG-IN إضافة التحكم بالكاميرا‎ 
SI EO E le ed BATTERY PLUG-IN إضافة قراءة حالة البطاريّة‎ 
OO A E Device PLUG-IN إضافة قراءة معلومات الجهاز‎ 
6 SE Contacts PLUG-IN إضافة سجل جهات الاتصال‎ 
5 ی بسن‎ e DEVICE MOTION PLUG-IN الجهاز‎ AS إضافة التحسس لحر‎ 
(SY ی‎ GEOLOCATION PLUG-IN إضافة قراءة معلومات الموضع الجغر افي للجهاز‎ 
a المزید من الإضافات‎ 
O eanesaags ange A Sea as خاتمة‎ 
اك‎ RSE RSE EG RS E الفهارس‎ 
۱33 اس ی‎ Ree A rere ae فهرس الأشكال التوضيحيّة‎ 
A فهرس الصور‎ 
7 EEEE IAEE RER فهرس الشيفرات البرمجيّة‎ 
Inan SRR SAE فهرس الجداول‎ 
Pea و و و‎ E A فهرس المحتویات‎ 


المستعار في آعماله الأدبيّة هو مختار الكمالي نسبة إلى 
مدينة البوکمال الواقعة شرق سوریا على الحدود العراقيّة 
السوريّة و التي ولد فیها عام 1989. 


يحمل اجازة في هندسة الحاسوب و المعلوماتية , و هو 


الان على مشارف الحصول على درجة الماجستیر في 
اختصاص تقانات الویب. 


تدرّح في مراحل حیاته العمليّة من مبرمج يعمل Slee‏ حراً إلى مبرمج متعاقد إلى مهندس برمجیّات 
إلى أن وصل إلى عمله الحالي کمدیر تنفيذي IV‏ شركة دفع الکترونن في العاصمة السوريّة 


دمشق و ما hy‏ على رأس alee‏ هذا حتی تاريخ نشر هذا الکتاب. 
صدر له کتابان تقنيّان قبل هذا الکتاب. 
صدرت له مجموعة من الأعمال الأدبيّة في الشعر و المسرح الشعري. 


طوّر al‏ نظام برمجيّ Que‏ لحوسبة عروض الشعر العربي و قافيته تحت اسم (الفراهيدي - 


مشروع حوسبة عروض و قافية الشعر العربی على الويب). 


فاز بعدد من الجوائز العلميّة و الأدبية داخل سوريا و خارجها , و شارك في عدد كبير من 


الفعاليّات و اللقاءات العلميّة و الأدبيّة داخل سوريا و خارجها. 


صدر للمؤلّف: 
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على الستوی الشخصي , و کمطور قادم من 
خلفيّة اختصاصيّة في التطویر للویب فقد كان 
دخولي إلى عام التطوير للأجهزة الذكيّة يعني 
حاجتي لتعلم dtc‏ لغات برمجية و dls‏ 
تقنيّات جديدة و هو أمر -على اعتيادي عليه- 
م تتحه لي مواردي الزمنيّة و لا Gol‏ في وقتها 
ما دفع بي أن أكتفي بتعلم البرمجة لنظام 
GY Android‏ النظام الأكثر شعبيّة في بلدي و 
آتوقف عند هذا Lal‏ , مع عقد العزم على 
تعلّم المزيد في أقرب الفرص. 

بعدها بفترة قصيرة وجدث „lo‏ عندما 
Endy‏ مصادفة g-‏ لحسن حظي- على تقنيّة 
جديدة قذمتها شركة Adobe‏ تسمح بتطوير 
تطبيقات لكافة الهواتف الذكيّة الصنعة من 
كافة الشركات تقريباً باستخدام تقنيّات تطوير 
الويب الكلاسيكيّة ذاتها , نعم ذاتها , معنى 
Si‏ أستطيع أن أطور تطبيقاً واحداً و bÍ‏ 
مطمئنٌ أنه سيعمل على كافة Glare‏ الهواتف 
الذكيّة باستخدام HTML‏ و CSS‏ 
و Java script‏ فقط , بعد توسعة الأخيرة 
بالتقنيّة الجديدة طبعاً. 

هذه التقنيّة الجديدة اسمها phoneGap‏ 
و هي الوضوع الأساسي الذي سيحاول هذا 
الكتاب تغطيته بعد أن هر في صفحاته الأولى 
بإيجاز على بعض التقنيّات الثانويّة المساعدة 


في إنجاز تطبیق عصري باستخدام -phoneGap‏ 


